import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import http from '../../utils/http'
import Map from '../../components/Map'
import { HeartOutline } from 'antd-mobile-icons'
import { useNavigate, useParams } from 'react-router-dom'
import { NavBar, List, Tag, Image, Card } from 'antd-mobile'
function Index() {
  const navigate = useNavigate()
  const { id } = useParams()
  const [detail, setDetail] = useState({})
  const getDetail = async () => {
    const res = await http.get('/api/list/detail', { params: { id } })
    console.log(res);
    const { code, data } = res.data
    if (code === 200) {
      setDetail(data)
    }
  }
  useEffect(() => {
    getDetail()
  }, [])

  const [collectList, setCollectList] = useState(
    JSON.parse(localStorage.getItem("collectList")) || []
  );

  const handelColl = (item) => {
    const collState = collectList.some((it) => it.id === item.id);

    if (collState) {
      const filterList = collectList.filter((it) => it.id !== item.id);
      setCollectList(filterList);
      localStorage.setItem("collectList", JSON.stringify(filterList));
    } else {
      setCollectList([...collectList, item]);
      localStorage.setItem(
        "collectList",
        JSON.stringify([...collectList, item])
      );
    }
  };

  const handleSeat = () => {
    navigate(`/seat`, { state: detail })
  }
  return (
    <div>
      <NavBar onBack={() => navigate(-1)} right={<div style={{ fontSize: '25px' }}><HeartOutline
        onClick={() => handelColl(detail)}
        fontSize={20}
        color={
          collectList.some((it) => it.id === detail.id)
            ? "orangered"
            : "#999"
        } /></div>}>活动详情</NavBar>
      <div className={styles.box_wroe}>
        <img src={detail.image} alt="" />
        <List.Item extra={<Tag round color='#2db7f5'>￥{detail.price}</Tag>}>{detail.title}</List.Item>
        <List.Item description={<div>182名参与者   {detail.date}</div>}></List.Item>
      </div>
      <div className={styles.text_wroe}>
        <h3>活动介绍</h3>
        <span>
          公共演艺厅音乐厅和多功能的表演场所等等，是供音<br />
          乐家进行表演的场所。在舞台上。音乐家通过演奏乐<br />
          器或演唱歌曲石城县音乐……      <a>查看全部</a>
        </span>
      </div>
      <div className={styles.image_wroe}>
        <List.Item
          prefix={
            <Image
              src={detail.image}
              style={{ borderRadius: 20 }}
              fit='cover'
              width={40}
              height={40}
            />
          }
        >
          {detail.title}
        </List.Item>
      </div>
      <Card title='活动位置'>
        <Map />
      </Card>
      <div className={styles.bottom_wroe} onClick={() => handleSeat()}>
        立即预订
      </div>
    </div>
  )
}

export default Index
